<template>
  <div >
    <div  id="myChart3" :style="{width: '500px', height: '350px',}"></div>
  </div>
</template>
<script>
var that = this;
export default {
  data() {
    return {
      datax: [
        {value:35, name: 'A区车位'},
        {value:31, name: 'B区车位'},
        {value:23, name: 'C区车位'},
        {value:35, name: 'D区车位'},
        {value:48, name: 'E区车位'}],
    communities:['A区车位', 'B区车位', 'C区车位', 'D区车位', 'E区车位'],
    };
  },
  mounted() {
    this.drawLine(); //按照默认值预先绘制图表
  },
  created() {
    // this.$axios.get("drawLineChart3").then((response) => {
    //   if (response.data.statusCode == 200) {
    //     this.datax.length = 0; //数组清空
    //     for (let i = 0; i < response.data.data.length; i++) {
    //       this.datax.push(response.data.data[i]);
    //     }
    //     console.log(this.datax);
    //   }
    // });
    
  },
  watch: {
    datax: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        //do something
        this.drawLine();
      },
      deep: true,
    },
  },
  methods: {
    drawLine() {
      
      // 1、基于准备好的dom，初始化echarts实例
      let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
      //2、构造图表数据
      let options = {
     title: {
        text: '停车位数量统计',
        left: 'center'
    },
   tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        right: 0,
        top:10,
        data:this.communities
    },
     color : [ '#f05050','#27c24c', '#23b7e5', '#5085f2', '#8d7fec' ],
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['18%', '68%'],
            center: ['45%', '60%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '14',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data:this.datax
        }
    ]
    
};
    
            // 3、绘制图表

      myChart3.setOption(options);
      
    },
  

  },
  
};
</script>
<style scoped>
</style>